/**
 * 基础菜单 商品管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品库存</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <div style="margin-top:20px;margin-bottom:10px;">
      
        <el-button type="primary"  @click="deliveryrecordEdit()" round>发货记录</el-button>
        <el-button type="success" round @click=" WarehousingrecordEdit()">入库记录</el-button>
        <el-button type="warning" round @click=" InventorydetailsEdit()">库存详情</el-button>
        <el-button type="danger" round  @click="exportData()">导出库存</el-button>
        <el-form :inline="true" :model="formInline" class="user-search" >
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.material_code" placeholder="输入产品编码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    </div>
    
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column align="center" prop="material_code" label="产品编码" width="150">
      </el-table-column>
      <el-table-column align="center" prop="product_name" label="产品名称" width="150">
      </el-table-column>
      <el-table-column align="center" prop="product_Brand" label="产品品牌" width="150">
      </el-table-column>
      <el-table-column align="center" prop="product_classification" label="产品分类" width="150">
      </el-table-column>
      <el-table-column align="center" prop="product_model" label="产品型号" width="150">
      </el-table-column>
      <el-table-column align="center" prop="output_unit" label="产量单位" width="150">
      </el-table-column>
      <el-table-column align="center" prop="product_type" label="产品类型" width="150">
      </el-table-column>
       <el-table-column align="center" prop="warehouse_num" label="库存数量" width="150">
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 发货记录编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="80%" @click="closeDialog">
      <Deliveryrecord :deliveryrecord="tableData"/>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="closeDialog">确定</el-button>
      </div>
    </el-dialog>
     <!-- 入库记录编辑页面 -->
     <el-dialog :title="title1" :visible.sync="ware" width="80%" @click="closeDialog">
         <Warehousingrecord :warehourecord="warehouse"/>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="closeDialog">保存</el-button>
      </div>
    </el-dialog>
    <!-- 库存详情 -->
     <el-dialog :title="title2" :visible.sync="invent" width="80%" @click="closeDialog">
         <Inventorydetails :inventtory="inventtory"/>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="closeDialog">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deptList, deptSave, deptDelete } from '../../api/userMG'
import Deliveryrecord from '../../components/Deliveryrecord.vue'
import Inventorydetails from '../../components/Inventorydetails.vue'
import Pagination from '../../components/Pagination'
import Warehousingrecord from '../../components/Warehousingrecord.vue'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制发货页面显示与隐藏
      ware:false,//控制入库记录页面的显示与影藏
     invent:false,//控制库存详情表
      title: '发货记录',
      title1: '入库记录',
      title2: '库存详情',
      editForm: {
       
        token: localStorage.getItem('logintoken')
      },
      formInline: {
        material_code:"",
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      tableData: [
          {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
      ], //搜索发货记录表
      warehouse:[
          {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
      ],
      inventtory:[
          {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
      ],
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination,
    Deliveryrecord,
    Warehousingrecord,
    Inventorydetails,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
        //导出库存详情
    exportData(){
      this.$axios.get("/api/productionwarehouse/exportInventorydetails",{
        responseType: 'blob'
      }).then(response=> {
        //通过header中获取返回的文件名称
        let fileName = response.headers['content-disposition'].split(";")[1].split("filename=")[1]
        let blob = new Blob([response.data], { type: "application/vnd.ms-excel" })
        let downloadElement = document.createElement("a")
        var href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        //指定下载的文件的名称，切记进行decode
        downloadElement.download = decodeURI(fileName)
        document.body.appendChild(downloadElement)
        downloadElement.click()
        //移除临时创建对象，释放资源
        document.body.removeChild(downloadElement)
        window.URL.revokeObjectURL(href)
      });
    },
    // 获取公司列表
    getdata(parameter) {
      this.loading = true
      this.$axios.get('/api/productionwarehouse/inventorydetails/'+this.pageparm.currentPage+'/'+this.pageparm.pageSize)
        .then(res => {
          console.log(res)
          this.loading = false
          if (res.code==200) {
            this.$message({
              type: 'info',
              message: res.message
            })
          } else {
            this.listData = res.data.data.list
            // 分页赋值
            this.pageparm.total = res.data.data.total
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('菜单加载失败，请稍后再试！')
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.pageparm.currentPage = parm.currentPage
      this.pageparm.pageSize = parm.pageSize
      this.getdata(this.formInline)
    },
    // 根据产品编码搜索
    search() {
        this.$axios.get("/api/productionwarehouse/search/"+this.formInline.material_code).then(res=>{
         this.pageparm.total=res.data.data.length
         this.listData=res.data.data
        }).catch()
    },
    //显示发货记录界面
    deliveryrecordEdit: function() {
      this.editFormVisible = true
      this.$axios.get('/api/productionwarehouse/finddeliveryrecordEdit').then(res=>{
        console.log(res)
        this.tableData=res.data.data
      }).catch(err => {
          this.loading = false
          this.$message.error('菜单加载失败，请稍后再试！')
        })

     
    },
    //入库记录
    WarehousingrecordEdit: function() {
      this.ware = true
      this.$axios.get('/api/productionwarehouse/warehousingrecord').then(res=>{
           console.log(res.data.data)
           this.warehouse=res.data.data
      }).catch(err => {
          this.loading = false
          this.$message.error('菜单加载失败，请稍后再试！')
        })
     
    },
    //库存详情
   InventorydetailsEdit: function() {
      this.invent = true
       this.$axios.get('/api/productionwarehouse/inventorydetails').then(res=>{
            console.log(res.data.data)
            this.inventtory=res.data.data
      }).catch(err => {
          this.loading = false
          this.$message.error('菜单加载失败，请稍后再试！')
        })
    },
    // 编辑、增加页面保存方法
   
    // 删除公司
    deleteUser(index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deptDelete(row.deptId)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '公司已删除!'
                })
                this.getdata(this.formInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('公司删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false,
      this.ware=false,
      this.invent=false
      // this.$axios.get("/api/rbac/findALL").then(res=>{

      // }).catch()

    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 